import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Carousel, WingBlank, SearchBar, Picker } from "weaver-mobile";
import { getMeetingList } from "../../api/index";
import "./index.less";
const tabs = [
  { title: "年度会议", key: 0 },
  { title: "区域会议", key: 1 },
  { title: "股东大会", key: 2 },
];

const meetingTypes = [
  {
    label: "会务类型1",
    value: 1,
  },
  {
    label: "会务类型2",
    value: 2,
  },
  {
    label: "会务类型3",
    value: 3,
  },
];

@withRouter
export default class Homepage extends Component {
  state = {
    imgHeight: 176,
    type: 0,

    pageNo: 1,
    pageSize: 100,
    title: "",

    meetings: [
      {
        id: 1,
        title: "投资创造财富 成长提升价值|中田集团2021年全国股东大会",
        content: "2021年春天，中田集团全国股东会议在XXXXXXXX",
        img: "/images/detail1.png",
        date: "2021-04-27 09:29:12",
      },
      {
        id: 2,
        title: "人才招聘|低学历？高薪水？想创业？你一定不能错过这里！",
        content: "受世界整体经济下滑的影响，全行业就业****",
        img: "/images/detail2.png",
        date: "2021-04-26 09:29:12",
      },
    ],
  };

  loadMeetingList() {
    getMeetingList({
      pageNo: this.state.pageNo,
      pageSize: this.state.pageSize,
      title: this.state.title,
      type: this.state.type,
    }).then((result) => {
      this.setState({
        meetings: result.data.data,
      });
    });
  }

  handleDetail(item) {
    this.props.history.push("/meeting/detail/" + item.id);
  }

  componentDidMount() {
    this.loadMeetingList();
  }

  render() {
    return (
      <div className="homepage">
        <Carousel autoplay={false} infinite>
          <a
            style={{
              display: "inline-block",
              width: "100%",
              height: this.state.imgHeight,
            }}
          >
            <img
              src={`/images/index.png`}
              alt=""
              style={{ width: "100%", verticalAlign: "top" }}
            />
          </a>
        </Carousel>
        <div className="center">
          <SearchBar
            className="search-bar"
            placeholder="请输入会议名称"
            maxLength={20}
            value={this.state.title}
            onChange={(e) => {
              this.setState({
                title: e,
              });
            }}
            onSubmit={(e) => {
              this.loadMeetingList();
            }}
          />
          <div className="tabs">
            {tabs.map((e) => {
              return (
                <div
                  key={e.key}
                  className={this.state.type == e.key ? "tab active" : "tab"}
                  onClick={() => {
                    this.setState(
                      {
                        type: e.key,
                      },
                      () => {
                        this.loadMeetingList();
                      }
                    );
                  }}
                >
                  {e.title}
                </div>
              );
            })}
          </div>
        </div>
        <div className="pickers">
          <div className="picker">会务类型</div>
          <div className="picker">会务状态</div>
        </div>
        <div className="cards">
          {this.state.meetings.map((item) => {
            return (
              <div
                className="card"
                key={item.id}
                onClick={() => {
                  this.handleDetail(item);
                }}
              >
                <div className="main">
                  <div className="text">
                    <div className="title">{item.title}</div>
                    <div className="content">{item.content}</div>
                  </div>
                  <div className="img">
                    <img src={item.img}></img>
                  </div>
                </div>
                <div className="footer">
                  <div className="btn">立即报名</div>
                  <div className="date">{item.date}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
